Tailwind.css のための型安全な classNames() モジュール
をつくる。名前は irontail が良い(仮)。
code:tsx
// こんな感じに使う
import ix from 'irontail'
export const Grid: React.FC = ({ children }) => <div className={ix('grid', 'gap-4')}>{children}</div>
// あるいはこう
import { classNames } from 'irontail'
基本的には良いが、custom configuration への対応の仕方が first-class ではない( CLI を用いて型定義を各プロジェクトで生成する必要がある )
個人的には型定義をコミットせずに住むのが理想。VSCode の Tailwind Intellisense みたいに、勝手にプロジェクト内の tailwind.config.js を読んで勝手にやるとかができないものか
そして、tailwind の型情報を作るにしても個人的に補完はそんなにいらないと思っている。
なぜなら補完はすでに ↑ の拡張機能がすぐれた結果を出しているので(しかもクラス名のみならず色とかスタイル情報までいい感じに出している)。中途半端につくっても劣化コピーになるんじゃないかな。
それよりは、たとえば tailwind.config をもりもりカスタマイズしているプロジェクト向けに、config を変更した結果使えなくなったクラスを使ってる箇所に警告を出すとか、そういうのを主目的にしたい。
TypeScript Language Service Plugin の機能を使って ↑ が実現可能かしらべたい。